<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #container div{
            display: inline-block;
            text-align: center;
            font-size: 30px;
            padding: 0 15px;
            margin: 5px 5px;
            height: 50px;
            line-height: 50px;
            background-color: #FF0000;
            color: #FFFFFF;
        }
    </style>
    </head>
    <body>
        <input type="text" id="num-input"/>
        <input type="button" value="左侧入" />
        <input type="button" value="右侧入" style="margin-right: 30px;"/>
        <input type="button" value="左侧出" />
        <input type="button" value="右侧出" />
        <input type="button" value="冒泡排序" />
        
        <div id="container">
            
        </div>  
        <script>
        /*事件绑定 兼容browser*/
        var addEvent = (function(){
            if(window.addEventListener){
                return function(element,event,listener){
                     element.addEventListener(event, listener, false);
                }
            }
            else {
                return function(element,event,listener){
                    element.attachEvent('on' + event, listener, false);
                }       
            }
        })();

        window.onload = function(){
            var container = document.getElementById('container');
            var buttonList = document.getElementsByTagName('input');
            
            var queue = {
                str: [],
                
                leftPush: function(num){
                    this.str.unshift(num);
                    this.paint();
                },
                
                rightPush: function(num){
                    this.str.push(num);
                    this.paint();
                },
                
                isEmpty: function(){
                    return (this.str.length == 0);  
                },
                
                leftPop: function(){
                    if(!this.isEmpty()){
                        alert(this.str.shift());
                        this.paint();
                    }
                    else{
                        alert("队列以空");
                    }
                },
            
                rightPop: function(){
                    if (!this.isEmpty()) {
                        alert(this.str.pop());
                        this.paint();
                    }
                    else {
                        alert("队列以空");
                    }
                },
                
                sort: function(){
                    var arr = this.str;
                    alert("原始数组：" + arr);
                    for (var j = 0; j < arr.length -1 ;j ++) {
                        for (var i=0; i < arr.length -1 ; i++) {
                            var tmp = arr[i+1];
                            if(tmp < arr[i]) {                                
                                arr[i+1] = arr[i];
                                arr[i] = tmp;
                                this.paint();
                            }
                        }
                    }
                }, 

                paint: function(){
                    var newDiv;
                    container.innerHTML = "";
                    this.str.forEach(function(item){
                       newDiv = document.createElement("div");
                       newDiv.style.height = parseInt(item) + "px";
                       container.appendChild(newDiv);
                    });
                    addDivDelEvent();
                },
                
                deleteID: function(id){
                    console.log(id);
                    this.str.splice(id, 1);
                    this.paint();
                },
            }
            
            function addDivDelEvent() {
                for (var cur = 0; cur < container.childNodes.length; cur++) {
                    
                    //这里要使用闭包，否则永远绑定到指定div上的delete函数的参数永远等于跳出时的cur值(length);
                    addEvent(container.childNodes[cur], "click", function(cur) {                       
                        return function(){
                            queue.deleteID(cur);
                        } 
                    }(cur));
                }
            }
            
            addEvent(buttonList[1], "click", function() {
                var input = buttonList[0].value;
                if ((/^[0-9]+$/).test(input) && 100 > input && input > 10) {
                    if (queue.str.length > 60) {
                        alert("队列已达到上限");
                    }
                    queue.leftPush(input);
                }
                else {
                     alert("Please enter 10 ~ 100!");
                }
            });
            addEvent(buttonList[2], "click", function() {
                var input = buttonList[0].value;
                  if ((/^[0-9]+$/).test(input) && 100 > input && input > 10) {
                   if (queue.str.length > 60) {
                        alert("队列已达到上限");
                    }
                    queue.rightPush(input);
                }
                else {
                    alert("Please enter 10 ~ 100!");
                }
                });
            addEvent(buttonList[3], "click", function(){queue.leftPop()});
            addEvent(buttonList[4], "click", function(){queue.rightPop()});
            addEvent(buttonList[5], "click", function(){queue.sort()});               
        }
       
        </script>
    </body>
</html>